<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>上海山宝破碎机-中国破碎机生产和破碎机出口基地</title>
    <META
      NAME="keywords"
      CONTENT="破碎机，颚式破碎机，锤式破碎机，碎石破碎机，圆锥破碎机反击式破碎机，振动筛，喂料机，振动给料机，洗砂机，采矿设备，矿山机械，矿山机器"
    />
    <meta
      name="description"
      content="上海建设路桥机械设备有限公司是上海破碎机专业生产厂家，其山宝牌商标被认定为中国驰名商标，公司主营圆锥破碎机、单段破碎机、烘干破碎机、颚式破碎机、反击式破碎机等"
    />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/statics/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/fonts/iconfont/iconfont.css" />
    <!-- swiper -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/localjs/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/localjs/swiper/swiper.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/common.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/login.css" type="text/css" />
    <script src="${pageContext.request.contextPath}/statics/localjs/jquery/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/login.js"></script>
    <style type="text/css">
      .slidetounlock {
        font-size: 12px;
        background: -webkit-gradient(
          linear,
          left top,
          right top,
          color-stop(0, #4d4d4d),
          color-stop(0.4, #4d4d4d),
          color-stop(0.5, #fff),
          color-stop(0.6, #4d4d4d),
          color-stop(1, #4d4d4d)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-animation: slidetounlock 3s infinite;
        -webkit-text-size-adjust: none;
      }

      @-webkit-keyframes slidetounlock {
        0% {
          background-position: -200px 0;
        }

        100% {
          background-position: 200px 0;
        }
      }
    </style>
  </head>

  <body>
    <!-- 头部 -->
    <header class="sb_header w980 clearfix">
      <a href="#" class="logo fl"><img src="${pageContext.request.contextPath}/statics/images/logo.jpg" alt=""/></a>
      <ul class="fl">
        <li><a href="#">首页</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">解决方案</a></li>
        <li><a href="#">技术支持</a></li>
      </ul>
      <p>
        <a class="iconfont icon-user"></a>
        <a class="iconfont icon-buy"></a>
      </p>
    </header>
    <div class="continar w980">
      <div class="login ">
        <!-- 登录页右侧banner -->
        <div class="banner col-md-7">
          <img src="${pageContext.request.contextPath}/statics/images/banner/5.jpg" alt="" />
        </div>
        <div class="loginForm clearfix">
          <div class="col-md-5">
            <!-- 面板组件 -->
            <div class="login-swich">
              <div class="icon1"></div>
              <div class="icon2"></div>
            </div>
            <div class="yin">
              <div class="head clearfix">
                <div class="mima current fl">密码登录</div>
                <div class="dx fl">短信登录</div>
              </div>
             <form></form>
              <div class="password clearfix">
                <form method="post" action="${pageContext.request.contextPath}/doLogin">
                <input type="text" id="input1" placeholder="手机号/邮箱" name="uname" />
                <input type="text" id="input2" placeholder="密码" name="upwd" />
                <div id="wrapper" style="display:none">
                  <div id="drag">
                    <div class="drag_bg"></div>
                    <div
                      class="drag_text slidetounlock"
                      onselectstart="return false;"
                      unselectable="on"
                    >
                      请按住滑块，拖动到最右边
                    </div>
                    <div class="handler handler_bg"></div>
                  </div>
                </div>

                <div class="load"><input id="input4" type="submit" value="登录"></div>
                </form>
                <label><input type="checkbox" id="input3" />下次自动登录</label>
                <div class="wma">
                  <a href="javascript:void(0)">忘记密码</a> &nbsp; | &nbsp;
                  <a href="${pageContext.request.contextPath}/toRegister">注册</a>
                </div>
              </div>
              <div class="login-box">
                <a class="wx" href="javascript:void(0)"></a>
                <a class="wb" href="javascript:void(0)"></a>
                <a class="qq" href="javascript:void(0)"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer class="sb_footer w980">
      <p class="top">
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="otherinfo.asp?c=12">隐私条款</a>
        <span>|</span>
        <a href="otherinfo.asp?c=13">法律声明</a>
        &nbsp;&nbsp;
        <span>电话：+86(21)-51393838</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>地址：上海市奉贤区金汇镇工业路188号</span>
      </p>

      <p class="bottom">
        Copyright &copy; 2012 上海建设路桥机械设备有限公司 版权所有
        沪ICP备00226688号
        <!--<a href="http://www.free-web.cn">技术支持：网动力</a>-->
      </p>
    </footer>
    <script src="${pageContext.request.contextPath}/statics/localjs/swiper/swiper.jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/localjs/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
    <script>
      $('#drag').drag();
      var wrapper = document.querySelector('#wrapper');
      var mima = document.querySelector('.mima');
      var dx = document.querySelector('.dx');
      dx.onclick = function() {
        this.className = 'current dx fl';
        this.onmouseout = null;
        mima.className = 'mima fl';
        mima.onmouseout = function() {
          this.className = 'mima fl';
        };
        input1.placeholder = '请输入手机号';
        input2.style.display = 'none';
        wrapper.style.display = 'block';
      };
      dx.onmouseover = function() {
        this.className = 'current dx fl';
      };
      dx.onmouseout = function() {
        this.className = 'dx fl';
      };
      mima.onclick = function() {
        this.className = 'current mima fl';
        this.onmouseout = null;
        dx.className = 'dx fl';
        dx.onmouseout = function() {
          this.className = 'dx fl';
        };
        input1.placeholder = '账号';
        input2.style.display = 'block';
        wrapper.style.display = 'none';
      };
      mima.onmouseover = function() {
        this.className = 'current mima fl';
      };
      mima.onmouseout = function() {
        if (dx.className == 'current dx fl') {
          this.className = 'mima fl';
        }
      };

      var input1 = document.querySelector('#input1');
      var input2 = document.querySelector('#input2');
      var dl = document.querySelector('.load');
      input1.onfocus = function() {
        this.style.background = '#fff';
      };
      input1.onblur = function() {
        this.style.background = '#f4f4f4';
      };
      input2.onfocus = function() {
        this.style.background = '#fff';
      };
      input2.onblur = function() {
        this.style.background = '#f4f4f4';
      };
      input2.onkeyup = function() {
        if (input1.value.length != 0 && input2.value.length != 0) {
          dl.style.background = '#FF6555';
          dl.style.color = '#fff';
          dl.style.cursor = 'pointer';
        }
        if (input1.value.length == 0 || input2.value.length == 0) {
          dl.style.background = '#f4f4f4';
          dl.style.color = '#999999';
          dl.style.cursor = 'auto';
        }
      };
      input1.onkeyup = function() {
        if (input1.value.length != 0 && input2.value.length != 0) {
          dl.style.background = '#FF6555';
          dl.style.color = '#fff';
          dl.style.cursor = 'pointer';
        }
        if (input1.value.length == 0 || input2.value.length == 0) {
          dl.style.background = '#f4f4f4';
          dl.style.color = '#999999';
          dl.style.cursor = 'auto';
        }
      };
      var loginSwich = document.querySelector('.login-swich');
      var icon1 = document.querySelector('.login-swich .icon1');
      var icon2 = document.querySelector('.login-swich .icon2');
      var mainBody = document.querySelector('.main_body .yin');
      var quick = document.querySelector('.main_body .quick');
      var index = 0;
      loginSwich.onclick = function() {
        index++;
        if (index % 2 == 0) {
          icon1.style.display = 'block';
          mainBody.style.display = 'block';
          quick.style.display = 'none';
        } else {
          icon1.style.display = 'none';
          mainBody.style.display = 'none';
          quick.style.display = 'block';
        }
      };
    </script>
  </body>
</html>
